<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="商户编号">
                  <el-input
                    v-model="searchModel.userId"
                    placeholder="商户编号"
                  />
                </el-form-item>

                <el-form-item label="合伙人编号">
                  <el-input
                    v-model="searchModel.partnerId"
                    placeholder="合伙人编号"
                  />
                </el-form-item>

                <el-form-item label="批次总笔数">
                  <div style="display:flex;">
                    <el-input
                      v-model="searchModel.minTotalCount"
                      placeholder="最少笔数"
                    />
                    ~
                    <el-input
                      v-model="searchModel.maxTotalCount"
                      placeholder="最大笔数"
                    />
                  </div>

                </el-form-item>
                <el-form-item label="统计时间">
                  <el-date-picker
                    v-model="searchModel.recordTime"
                    :default-time="['00:00:00']"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>

                <el-form-item >
                  <el-button type="success" 
                  @click="exportSafePayTransStat">
                  导出</el-button>
                  <el-button
                    type="primary"
                    @click="search"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="mini"
              style="width: 100%"
            >
            <el-table-column
                prop="day"
                label="交易日期"
              />
              <el-table-column
                prop="userId"
                label="商户编号"
              />
              <el-table-column
                prop="partnerId"
                label="合伙人编号"
              />
              <el-table-column
                prop="failCount"
                label="失败笔数"
              />
              <el-table-column
                prop="failedAmount"
                label="失败金额"
              />
              <el-table-column prop="successAmount" label="成功金额" />
              <el-table-column
                prop="successBankAmount"
                label="成功到卡的金额"
              />
              <el-table-column
                prop="successAlipayAmount"
                label="成功到支付宝的金额"
              />
              <el-table-column prop="successCount" label="成功笔数" />

              <el-table-column prop="successBankCount" label="成功到卡的笔数" />

              <el-table-column
                prop="successAlipayCount"
                label="成功到支付宝的笔数"
              />
              <el-table-column
                prop="totalCount"
                label="批次总笔数"
              />
              <el-table-column
                prop="totalTransAmount"
                label="批次总金额"
              />
              <el-table-column
                prop="finalServicePrice"
                label="服务费支出"
              >
              <template slot-scope="scope">
                  <div >
                    {{(scope.row.finalServicePrice / 100).toFixed(2)}}
                  </div>
                </template>
              </el-table-column>
             
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchSafePayTransStat } from "@/api/business";
const defaultModel = {
  minTotalCount: 1,
  userId: "",
  partnerId:"",
  recordTime: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
    };
  },
  created() {
    // 初始化数据
    this.getList(1);
  },
  methods: {
        // 导出
      exportSafePayTransStat() {
      var $temp = $("<form type='hidden'>"); //创建form标签
      $temp.attr("target", "_black");
      $temp.attr("method", "get");
      $temp.attr("action", "/api/admin/user-safe-pay-trans-stat/export");
      var $input = $('<input type="hidden">');
      $input.attr("name", "searchModelJson");

      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);

      $input.attr("value", JSON.stringify(searchModel));
      $temp.append($input);
      $(document.body).append($temp);
      $temp.submit();
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    // 修改页面
    handleCurrentChange(val) {
      this.loading = true;
      this.getList(val);
    },
    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      searchSafePayTransStat(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {});
    },
    // 重置查询条件
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    // 查询
    search() {
      this.getList(1);
    },
    // 对searchModel进行处理
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;
      if (searchModel.recordTime && searchModel.recordTime.length) {
        searchModel["queryStartTime"] = searchModel.recordTime[0];
        searchModel["queryEndTime"] = searchModel.recordTime[1];
      }
      delete searchModel.recordTime;
      return searchModel;
    },
  },
};
</script>

<style lang="scss" scoped>
.operations {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
